<!--
 * @Author: zhoujinlong 765637726@qq.com
 * @Date: 2024-03-08 08:46:18
 * @LastEditors: zhoujinlong 765637726@qq.com
 * @LastEditTime: 2024-04-07 19:55:19
 * @FilePath: \pingxi\src\components\SmokeNumber.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="w100 h100" ref="chatSmoke">

  </div>
</template>

<script setup lang="ts">
import http from "@/http/index";
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
function getRandomColor() {  
    var r = Math.floor(Math.random() * 256);  
    var g = Math.floor(Math.random() * 256);  
    var b = Math.floor(Math.random() * 256);  
    return 'rgb(' + r + ',' + g + ',' + b + ')';  
}
const chatSmoke = ref();
onMounted(async () => {
  const res3 = await http.corsApi("/index/smokeGroupBrand", "get", {});
  console.log("res3", res3);
  let smokename = [];
  let seriesData = [];
  smokename = Object.keys(res3.data);
  smokename.forEach(item=>{
    seriesData.push({
      value: res3.data[item], name: item, itemStyle: { color: getRandomColor() }
    })
  })

  //   var chartDom = document.getElementById("main");
  var myChart = echarts.init(chatSmoke.value);
  var option;

  option = {
    title: {
      padding: [10, 0, 0, 20],
      text: "烟支牌号总量",
      subtext: "",
      left: "left",
    },
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c} ({d}%)",
    },
    legend: {
      // bottom: 10,
      top: 30,
      left: "center",
      data: smokename,
    },
    series: [
      {
        top: "30",
        type: "pie",
        radius: "65%",
        center: ["50%", "50%"],
        selectedMode: "single",
        data: [...seriesData
          // { value: 1548, name: "利群", itemStyle: { color: "#2478f2" } },
          // { value: 735, name: "乐途", itemStyle: { color: "#84b7f9" } },
          // { value: 510, name: "小目标", itemStyle: { color: "#5f9cf8" } },
          // { value: 434, name: "帝豪", itemStyle: { color: "#cee5fc" } },
          // { value: 335, name: "天叶", itemStyle: { color: "#aad0fb" } },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  option && myChart.setOption(option);
});
</script>

<style lang="scss" scoped>
</style>